<template>
	<div>
		<van-steps
			v-if="showStepBar"
			class="app-control-wizardpanel__header control-header"
			:active="active"
		>
			<van-step
				v-for="(step, index) in steps"
				:key="index"
				:class="step.cssName"
			>
				<template v-if="step.icon" #active-icon>
					<AppIconText
						:imgPath="step.icon.imgPath"
						:iconClass="step.icon.iconClass"
					/>
				</template>
				{{ $t(step.lanResTag, step.title) }}
			</van-step>
		</van-steps>
		<div class="app-control-wizardpanel__content control-content">
			<slot name="form"></slot>
		</div>
		<div class="app-control-wizardpanel__footer control-footer">
			<AppButton
				class="app-control-wizardpanel__footer__button"
				v-if="!isHidden('PREV')"
				type="primary"
				@click="handleClick('prev')"
			>
				{{
					$t(
						buttonCaption.prevLanResTag
							? buttonCaption.prevLanResTag
							: 'widget.wizardpanel.prev',
						buttonCaption.prevCaption ? buttonCaption.prevCaption : '上一步'
					)
				}}
			</AppButton>
			<AppButton
				class="app-control-wizardpanel__footer__button"
				v-if="!isHidden('NEXT')"
				type="primary"
				@click="handleClick('next')"
			>
				{{
					$t(
						buttonCaption.nextLanResTag
							? buttonCaption.nextLanResTag
							: 'widget.wizardpanel.next',
						buttonCaption.nextCaption ? buttonCaption.nextCaption : '下一步'
					)
				}}
			</AppButton>
			<AppButton
				class="app-control-wizardpanel__footer__button"
				v-if="!isHidden('FINISH')"
				type="primary"
				@click="handleClick('finish')"
			>
				{{
					$t(
						buttonCaption.finishLanResTag
							? buttonCaption.finishLanResTag
							: 'widget.wizardpanel.finish',
						buttonCaption.finishCaption ? buttonCaption.finishCaption : '完成'
					)
				}}
			</AppButton>
		</div>
	</div>
</template>
<script setup lang="ts">
import { IParam } from '@/core';
import { wizardPanelProps } from './wizard-panel';
const props = defineProps(wizardPanelProps);

const emit = defineEmits<{
	(name: 'itemClick', value: string): void;
}>();

const active = ref<number>(0);

const isHidden = (type: string): boolean => {
	let hidden: boolean = false;
	if (props.steps.length > 0) {
		const curActionStep = props.steps[active.value];
		const actionForm = props.wizardForm.find((form: IParam) => {
			return form.stepTag == curActionStep.stepTag;
		});
		if (
			actionForm &&
			actionForm.stepActions &&
			actionForm.stepActions.indexOf(type) < 0
		) {
			hidden = true;
		}
	}
	return hidden;
};

const handleClick = (value: string) => {
	emit('itemClick', value);
};
</script>
